<template>
    <div>
        <el-card>
            <h3>后裔管理系统</h3>
            <el-form label-width="100px" :model="loginForm" :rules="loginRules" ref="loginRef">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input  type="password" v-model="loginForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item><el-button type="primary" @click="handLogin" >登录</el-button></el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
 import { ref, reactive} from "vue";
 //表单验证
 import type { FormInstance, FormRules } from 'element-plus';
 //弹框
 import { ElMessage } from 'element-plus';
 import {login} from "../api/api"
 import  {useRouter} from "vue-router" //返回路由器实例。相当于在模板中使用 $router。
 const  router =useRouter();
 const loginForm=reactive({
    username:'',
    password:'',
 }); 
 /*  loginRef,定义一个内部类型为frominstance的响应式对象这意味着 loginRules 只能包含符合 FormRules 类型的数据。 FormRules 可能是一个自定义的接口或类型，用于定义表单验证规则。 */
 const loginRules:FormRules={
    username:{required:true,message:'请输入用户名',trigger:"blur"},//required:true,是否必填  trigger:"blur"触发时机
    password:{required:true,message:'请输入密码',trigger:"blur"},
 }

 /* 这行代码使用 Vue 3 Composition API 中的 ref 函数创建了一个响应式引用变量 loginRef，并且将其初始化为空。这是一个在 Vue 3 中用于管理响应式数据的工具。FormInstance 是可能是一个自定义的接口或类型，它定义了表单实例的数据结构。
通过使用 ref，你可以将普通的对象转换为响应式对象，使其在组件中具有响应式的行为，即当其值发生变化时，相关的视图会自动更新。loginRef 可以用于存储表单实例或其他需要响应性的数据。 */
 const loginRef=ref<FormInstance>()
 const handLogin = ()=>{
    /* validate（）时elment-ui封装好的用于对整个表单进行验证 validate的参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功(返回True或False)和未通过校验的字段。若不传入回调函数，则会返回以promise   Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。*/
    loginRef.value?.validate(async (valid)=>{
        if(valid){
            const res= await login(loginForm);

            if(res.data.data.code===10000){
                ElMessage.success("登陆成功");
                // console.log(router);
                 router.push("/mainpage");
                 sessionStorage.login="yes";
                
            }else{
                ElMessage.error("登录失败");
            }
        }
    }
 )}

</script>

<style scoped>

.el-card{
   width: 600px;
   height: 400px;
   /* margin: 0 auto; */
   position: absolute;
   left: 0;
   right: 0;
   top:0;
   bottom:0;
   margin:auto;
   padding: 50px;
   box-sizing: border-box;

}

</style>